<template>
  <div class="glList">
    <div
      class="glItem"
      v-for="(item, index) in glList.slice(0, limitNum)"
      :key="index"
      @click="itemContent(item)"
    >
      <div class="glTop">
        <div class="glFrom">
          <div class="icon" :class="{ fromIcon1: item.type == 3 }"></div>
          <div class="from">
            来自<span>{{ item.from_type }}</span>
          </div>
        </div>
        <div class="nums">
          <p>
            <span>{{ item.nums }}</span
            >&nbsp;{{ item.nums_type
            }}<i class="numsIcon" :class="{ fromIcon2: item.type == 3 }"></i>
          </p>
        </div>
      </div>
      <div class="glTitle">
        <h1>{{ item.title }}</h1>
      </div>
      <div class="cont">
        <div class="type1" v-if="item.type == 1">
          <div class="img"><img :src="item.body_img" alt="" /></div>
          <div class="t1Con">
            <div class="t1Context">
              <p>{{ item.content }}</p>
            </div>
            <div class="footnote">
              <div class="author">
                <img :src="item.author_img" alt="" />
                <span>{{ item.author_name }}</span>
              </div>
              <div class="ftNums">
                {{ item.browses_num }}浏览，{{ item.comments_num }}评论
              </div>
            </div>
          </div>
        </div>
        <div class="type3" v-else>
          <div class="t2Con">
            <div class="t2Context">
              <p>{{ item.content }}</p>
            </div>
            <div class="t2Img">
              <img
                :src="item2"
                alt=""
                v-for="(item2, index2) in item.img_list"
                :key="index2"
              />
              <p>{{ item.browses_num }}浏览</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="limitNum < glList.length" class="glMore" @click="getMore">加载更多...</div>
    <div v-else class="glMore notMore" @click="getMore">见底了</div>
  </div>
</template>

<script>
export default {
  name: "gl_tjgl",
  data() {
    return {
      limitNum: 10,
    };
  },
  props: {
    glList: {},
  },
  components: {},
  methods: {
    getMore() {
      this.limitNum += 10;
    },
    itemContent(item) {
      localStorage.setItem('title',JSON.stringify(item.title))
      localStorage.setItem('context',JSON.stringify(item.context))
      localStorage.setItem('conRight',JSON.stringify(item.conRight))
      this.$router.push('/gonglve/item')
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.glList {
  padding-bottom: 15px;
  overflow: auto;
  .glItem {
    padding: 20px;
    border-top: 1px solid #eee;
    cursor: pointer;
    &:hover {
      background-color: #f8f8f8;
      .glTitle {
        h1 {
          color: #ff9d00;
        }
      }
    }
    .glTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .glFrom {
        display: flex;
        align-items: center;
        .icon {
          content: "";
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-image: url("https://css.mafengwo.net/images/gonglve/new-gl-icon6@2x.png");
          background-size: 60px;
          background-position: 0 -40px;
        }
        .fromIcon1 {
          background-position: 0 -20px;
        }
        .from {
          padding-left: 5px;
          color: #666;
          font-size: 12px;
          span {
            padding-left: 5px;
            color: #ff9d00;
          }
        }
      }
      .nums {
        padding: 6px 16px;
        border: 1px solid #ff9d00;
        border-radius: 50px;
        font-size: 14px;
        background-color: #fff;
        p {
          display: flex;
          align-items: center;
          span {
            color: #ff9d00;
            padding-right: 5px;
          }
          .numsIcon {
            display: inline-block;
            content: "";
            width: 15px;
            height: 15px;
            margin-left: 5px;
            background-image: url("https://css.mafengwo.net/images/gonglve/new-gl-icon6@2x.png");
            background-size: 60px;
            background-position: 20px -40px;
          }
          .fromIcon2 {
            width: 16px;
            height: 16px;
            background-position: 40px -116px;
          }
        }
      }
    }
    .glTitle {
      h1 {
        font-size: 20px;
        color: #333;
        font-weight: normal;
      }
    }
    .cont {
      .type1 {
        padding-top: 12px;
        display: flex;
        .img {
          width: 220px;
        }
        .t1Con {
          padding-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .t1Context {
            padding-top: 10px;
            p {
              font-size: 14px;
              color: #666;
            }
          }
          .footnote {
            display: flex;
            align-content: center;
            justify-content: flex-end;
            font-size: 12px;
            color: #999;
            .author {
              display: flex;
              align-content: center;
              img {
                width: 16px;
                height: 16px;
                border-radius: 50%;
              }
              span {
                padding-left: 6px;
                padding-right: 10px;
                color: #ff9d00;
              }
            }
            .ftNums {
              display: flex;
              align-items: center;
            }
          }
        }
      }
      .type3 {
        .t2Con {
          .t2Context {
            p {
              font-size: 14px;
              color: #666;
              padding-top: 12px;
              padding-bottom: 10px;
            }
          }
          .t2Img {
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
              width: 220px;
            }
            p {
              height: max-content;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
  .glMore {
    height: 35px;
    margin: 0 20px;
    line-height: 35px;
    background-color: #eee;
    text-align: center;
    cursor: pointer;
  }
  .notMore {
    background-color: #fff;
    cursor: default;
    color: #999;
  }
}
</style>